<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人机大战之成语接龙</title>
<style>
h1{
    color:red
}
input{
    padding:8px;
    border-radius:6px;
}
.history{
    border:1px solid gray;
    border-radius:8px;
    padding:10px;
}
form  >div:nth-child(2) {
    /*border:1px solid red;*/
	display:flex;
	gap:10px;
	/*margin-top:10px;*/
	/*padding-top:20px;*/
}
.msg{
    color:red;
    font-weight: bold; /* 字体加粗 */
    margin:10px 0;
}
</style>
</head>
<body><%
request.setCharacterEncoding("utf-8");//对POST的数据，必须设置数据的编码
String cy=request.getParameter("cy");
String history=request.getParameter("history");
out.print(cy+"\t"+history);
if(cy!=null){ //提交有数据，需要处理用户输入的数据
    // ...处理过程
    
}
history=",吕龙龙,243113118,一清二白,白面儒生,生生不息,息息相关,rrr"; //处理的结果
%>
<div class='kuang'>
    <h1>人机大战之成语接龙</h1>
    <div class='history'>
<%
String[] cys=history.split(",");
//out.print(Arrays.toString(cys));
for(int i=1; i<cys.length;++i){
    out.println("\t\t<p>"+i+". ["+(i%2==0?"机":"人")+"] "+cys[i]+"</p>");
}
%>
    </div>
    <form method="post" action="">
        <div class='msg'></div>
        <div>
            <input type='text' name='cy' />
            <input type="submit" value='提交' onclick='return check()'/>
            <input type="button" value='重新开始' onclick='return again()'/>
            <input type='hidden' name='history' value=',一清二白,白面儒生,生生不息,息息相关' />
        </div>
    </form>
</div>
<script>
const $=function(selector){ //根据选择器返回指定的首个对象
    return document.querySelector(selector)
}
function check(){ //对用户输入的成语进行规则校验
//函数返回true，表单会提交，若返回false，就不会提交
    let first='关' //用户接龙成语的首字
    let cy=$('input[name=cy]').value.trim() //获取用户输入的成语，清除两端的空白
// if(cy.length<3||cy.length>14){ //成语长度不正确
//     $('.msg').innerText='成语的长度应该有3~14汉字~'
//     return false
// }
// if(!cy.startsWith(first)){
//     $('.msg').innerText='输入的成语必须以“关”字开头~'
//     return false
// }
    try{
        if(cy.length<3||cy.length>14) throw new Error('成语的长度应该有3~14汉字~') //抛出异常后会转移到catch块去执行，try块后续的代码不会再执行
        if(!cy.startsWith(first)) throw new Error('输入的成语必须以“关”字开头~')
        return true
    }catch(e){
        $('.msg').innerText=e.message //将错误信息显示在界面上
        return false //不再提交表单
    }
}
</script>
</body>
</html>
